import { FC, useEffect } from "react";
import classnames from "classnames";
// import "./QuestionCard.css";
// import styles from "./QuestionCard.module.css";
import styles from "./QuestionCard.module.scss";

type PropsType = {
  id: string;
  title: string;
  isPublished: boolean;
  deleteQuestion?: (id: string) => void;
  publishQuestion?: (id: string) => void;
};

const QuestionCard: FC<PropsType> = (props) => {
  const { id, title, isPublished, deleteQuestion, publishQuestion } = props;

  //编辑问卷
  function edit(id: string) {
    console.log("id:", id);
  }

  // 删除问卷
  function del(id: string) {
    deleteQuestion && deleteQuestion(id);
  }

  // 发布问卷
  function publish(id: string) {
    publishQuestion && publishQuestion(id);
  }

  useEffect(() => {
    console.log("QuestionCard mounted");
    return () => {
      console.log("QuestionCard unmounted " + id);
    };
  }, [id]);

  // 已发布的添加样式
  const listItemClass = styles["list-item"];
  const publishedClass = styles["published"];
  const itemClassName = classnames({
    [listItemClass]: true,
    [publishedClass]: isPublished,
  });

  return (
    <div key={id} className={itemClassName}>
      <strong>{title}</strong>
      &nbsp;
      {/* 条件判断 */}
      {isPublished ? (
        <span className={styles["published-span"]}>已发布</span>
      ) : (
        <span>未发布 </span>
      )}
      &nbsp;
      <button onClick={() => edit(id)}>编辑问卷</button>
      &nbsp;
      <button onClick={() => del(id)}>删除问卷</button>
      &nbsp;
      <button onClick={() => publish(id)}>发布问卷</button>
    </div>
  );
};

export default QuestionCard;
